<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/element_2.4.7.css">
    <link rel="stylesheet" href="css/style_vue.css">
</head>
<body>
<div id="vue-elememt">
    <div class="vue-transition">
        <p>弹出弹窗</p>
        <el-button @click="visible = true">Click Me</el-button>
        <el-dialog :visible.sync="visible" title="标题">
            <p>内容</p>
        </el-dialog>
    </div>

    <div class="vue-transition">
        <p>内置过渡动画</p>
        <div>
            <el-button @click="show = !show">fade 淡入淡出</el-button>
            <div class="vue-transition-block">
                <transition name="el-fade-in-linear">
                    <div v-show="show" class="vue-transition-box">.el-fade-in-linear</div>
                </transition>
                <transition name="el-fade-in">
                    <div v-show="show" class="vue-transition-box">.el-fade-in</div>
                </transition>
            </div>

            <el-button @click="show2 = !show2">Zoom 缩放</el-button>
            <div class="vue-transition-block">
                <transition name="el-zoom-in-center">
                    <div v-show="show2" class="vue-transition-box">.el-zoom-in-center</div>
                </transition>

                <transition name="el-zoom-in-top">
                    <div v-show="show2" class="vue-transition-box">.el-zoom-in-top</div>
                </transition>

                <transition name="el-zoom-in-bottom">
                    <div v-show="show2" class="vue-transition-box">.el-zoom-in-bottom</div>
                </transition>
            </div>

            <el-button @click="show3 = !show3">collapse 展开折叠</el-button>
            <div class="vue-transition-block">
                <el-collapse-transition>
                    <div v-show="show3">
                        <div class="vue-transition-box">el-collapse-transition</div>
                        <div class="vue-transition-box">el-collapse-transition</div>
                    </div>
                </el-collapse-transition>
            </div>
        </div>
    </div>

    <div class="vue-transition">
        <p>layout布局</p>
        <div>
            <p>无间隔</p>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
        </div>

        <div>
            <p>gutter分栏有间隔</p>
            <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
        </div>

        <div>
            <p>混合布局</p>
            <el-row :gutter="20">
                <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
        </div>

        <div>
            <p>offset分栏偏移</p>
            <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
        </div>

        <div>
            <p>flex对齐方式</p>
            <el-row type="flex" class="row-bg">
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="bottom">
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
        </div>

        <div>
            <p>xs,sm,md,lg,xl响应式布局</p>
            <el-row :gutter="10">
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
                <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
                <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
                <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
        </div>

        <div>
            <p>Row Attributes</p>
            <el-table :data="rowData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Col Attributes</p>
            <el-table :data="colData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Container 布局容器</p>
            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-container direction="vertical">
                    <!--direction:vertical-垂直排列;horizontal-水平排列-->
                    <el-header height="60px">Header</el-header>
                    <el-main>Main</el-main>
                    <el-footer height="60px">Footer</el-footer>
                </el-container>
            </el-container>
        </div>

        <div>
            <p>Container Attributes</p>
            <el-table :data="ContainerData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Header Attributes</p>
            <el-table :data="HeaderData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Aside Attributes</p>
            <el-table :data="AsideData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Footer Attributes</p>
            <el-table :data="FooterData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>图标</p>
            <i class="el-icon-edit"></i>
            <i class="el-icon-share"></i>
            <i class="el-icon-delete"></i>
            <i class="el-icon-info"></i>
            <i class="el-icon-error"></i>
        </div>
    </div>

    <div class="vue-transition">
        <p>Button按钮</p>
        <div>
            <p>基础用法</p>
            <el-row>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button plain>朴素按钮</el-button>
                <el-button type="primary" plain>主要按钮</el-button>
                <el-button type="success" plain>成功按钮</el-button>
                <el-button type="info" plain>信息按钮</el-button>
                <el-button type="warning" plain>警告按钮</el-button>
                <el-button type="danger" plain>危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button round>圆角按钮</el-button>
                <el-button type="primary" round>主要按钮</el-button>
                <el-button type="success" round>成功按钮</el-button>
                <el-button type="info" round>信息按钮</el-button>
                <el-button type="warning" round>警告按钮</el-button>
                <el-button type="danger" round>危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button icon="el-icon-search" circle></el-button>
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="success" icon="el-icon-check" circle></el-button>
                <el-button type="info" icon="el-icon-message" circle></el-button>
                <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-row>
        </div>

        <div>
            <p>禁用状态</p>
            <el-row>
                <el-button disabled>默认按钮</el-button>
                <el-button type="primary" disabled>主要按钮</el-button>
                <el-button type="success" disabled>成功按钮</el-button>
                <el-button type="info" disabled>信息按钮</el-button>
                <el-button type="warning" disabled>警告按钮</el-button>
                <el-button type="danger" disabled>危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button plain disabled>朴素按钮</el-button>
                <el-button type="primary" plain disabled>主要按钮</el-button>
                <el-button type="success" plain disabled>成功按钮</el-button>
                <el-button type="info" plain disabled>信息按钮</el-button>
                <el-button type="warning" plain disabled>警告按钮</el-button>
                <el-button type="danger" plain disabled>危险按钮</el-button>
            </el-row>
        </div>

        <div>
            <p>文字按钮</p>
            <el-button type="text">文字按钮</el-button>
            <el-button type="text" disabled>文字按钮</el-button>
        </div>

        <div>
            <p>图标按钮</p>
            <el-button type="primary" icon="el-icon-edit"></el-button>
            <el-button type="primary" icon="el-icon-share"></el-button>
            <el-button type="primary" icon="el-icon-delete"></el-button>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
            <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>

        <div>
            <p>按钮组</p>
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
                <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
            <el-button-group>
                <el-button type="primary" icon="el-icon-edit"></el-button>
                <el-button type="primary" icon="el-icon-share"></el-button>
                <el-button type="primary" icon="el-icon-delete"></el-button>
            </el-button-group>
        </div>

        <div>
            <p>加载中</p>
            <el-button type="primary" :loading="true">加载中</el-button>
        </div>

        <div>
            <p>不同尺寸</p>
            <el-row>
                <el-button>默认按钮</el-button>
                <el-button size="medium">中等按钮</el-button>
                <el-button size="small">小型按钮</el-button>
                <el-button size="mini">超小按钮</el-button>
            </el-row>
            <el-row>
                <el-button round>默认按钮</el-button>
                <el-button size="medium" round>中等按钮</el-button>
                <el-button size="small" round>小型按钮</el-button>
                <el-button size="mini" round>超小按钮</el-button>
            </el-row>
        </div>

        <div>
            <p>Attributes</p>
            <el-table :data="AttributesData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>
    </div>

    <div class="vue-transition">
        <p>Radio单选框</p>
        <div>
            <p>基础用法</p>
            <el-radio v-model="radio" label="1">备选项1</el-radio>
            <el-radio v-model="radio" label="2">备选项2</el-radio>
            <el-radio v-model="radio" label="3" disabled>备选项3</el-radio>
            <el-radio v-model="radio" label="4" border>备选项4</el-radio>
            <el-radio v-model="radio" label="5" border>备选项5</el-radio>
        </div>

        <div>
            <p>单选框组</p>
            <el-radio-group v-model="radio1">
                <el-radio label="1">备选项1</el-radio>
                <el-radio label="2">备选项2</el-radio>
            </el-radio-group>
        </div>

        <div>
            <p>按钮样式</p>
            <el-radio-group v-model="radio2" size="small" v-on:change="radio2_change" text-color="#ff9800" fill="#eae4e4">
                <el-radio-button label="1">备选项1</el-radio-button>
                <el-radio-button label="2" disabled>备选项2</el-radio-button>
                <el-radio-button label="3">备选项3</el-radio-button>
                <el-radio-button label="4">备选项4</el-radio-button>
                <el-radio-button label="5">备选项5</el-radio-button>
            </el-radio-group>
        </div>

        <div>
            <p>Radio Attributes</p>
            <el-table :data="RadioData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Radio Events</p>
            <el-table :data="RadioEvents" border style="width: 100%">
                <el-table-column prop="eventname" label="事件名称"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="callback" label="回调参数"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Radio-group Attributes</p>
            <el-table :data="RadiogroupData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Radio-group Events</p>
            <el-table :data="RadiogroupEvents" border style="width: 100%">
                <el-table-column prop="eventname" label="事件名称"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="callback" label="回调参数"></el-table-column>
            </el-table>
        </div>

        <div>
            <p>Radio-button Attributes</p>
            <el-table :data="RadiobuttonData" border style="width: 100%">
                <el-table-column prop="parameter" label="参数"></el-table-column>
                <el-table-column prop="explain" label="说明"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="option" label="可选值"></el-table-column>
                <el-table-column prop="default" label="默认值"></el-table-column>
            </el-table>
        </div>

        <div class="vue-transition">
            <p>Checkbox 多选框</p>
            <div>
                <p>基础用法</p>
                <div>
                    <el-checkbox v-model="checked" border>备选项1</el-checkbox>
                    <el-checkbox v-model="checked1" border>备选项2</el-checkbox>
                    <el-checkbox v-model="checked2" border disabled>备选项3</el-checkbox>
                </div>
            </div>

            <div>
                <p>多选框组</p>
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="复选框 A"></el-checkbox>
                    <el-checkbox label="复选框 B"></el-checkbox>
                    <el-checkbox label="复选框 C"></el-checkbox>
                    <el-checkbox label="禁用" disabled></el-checkbox>
                    <el-checkbox label="选中且禁用" disabled></el-checkbox>
                </el-checkbox-group>
            </div>

            <div>
                <p>按钮</p>
                <el-checkbox-group v-model="checkbuttonList" size="small">
                    <el-checkbox-button label="复选框 A"></el-checkbox-button>
                    <el-checkbox-button label="复选框 B"></el-checkbox-button>
                    <el-checkbox-button label="复选框 C"></el-checkbox-button>
                    <el-checkbox-button label="禁用" disabled></el-checkbox-button>
                    <el-checkbox-button label="选中且禁用" disabled></el-checkbox-button>
                </el-checkbox-group>
            </div>

            <div>
                <p>全选/非全选</p>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities" :min="0" :max="3"  @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>

    <div class="vue-transition">
        <p>Input输入框</p>
        <div>
            <p>基础用法</p>
            <el-input v-model="input" placeholder="请输入内容,最大长度为20" clearable maxlength="20" @clear="clear"></el-input>
            <el-input v-model="input" :disabled="true" placeholder="禁止输入" clearable></el-input>
        </div>

        <div>
            <p>带icon的输入框</p>
            <el-input v-model="input" :disabled="true" placeholder="suffix-icon右侧图标"  suffix-icon="el-icon-date" clearable></el-input>
            <el-input v-model="input" size="medium" :disabled="true" placeholder="prefix-icon左侧图标"  prefix-icon="el-icon-search" clearable></el-input>
            <!--slot方法-->
            <el-input v-model="input" size="small" :disabled="true" placeholder="slot方法右侧图标" clearable><i slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
            <el-input v-model="input" size="mini" :disabled="true" placeholder="slot方法左侧图标" clearable><i slot="prefix" class="el-input__icon el-icon-date"></i></el-input>
        </div>

        <div>
            <p>文本域</p>
            <el-input type="textarea" :row="2" v-model="textarea"  placeholder="文本框内容2行高"></el-input>
            <el-input type="textarea" autosize v-model="textarea"  placeholder="autosize文本框的高对应改变"></el-input>
            <el-input type="textarea" :autosize="{minRows:2,maxRows:4}" v-model="textarea"  placeholder="autosize文本框的高度最小2行高，最高四行高"></el-input>
        </div>

        <div>
            <p>复合型输入框</p>
            <el-input placeholder="请输入内容" v-model="input">
                <template slot="prepend">Http://</template>
                <template slot="append">.com</template>
            </el-input>

            <el-input placeholder="请输入内容" v-model="input" class="input-with-select" style="margin-top:10px;">
                <el-select v-model="select" slot="prepend" placeholder="请选择" @change="select_change">
                    <el-option label="餐厅名" value="1"></el-option>
                    <el-option label="订单号" value="2"></el-option>
                    <el-option label="用户电话" value="3"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>

        <div>
            <p>带输入建议</p>
            <el-row class="demo-autocomplete">
                <el-col :span="12">
                    <div class="sub-title">激活即列出输入建议</div>
                    <el-autocomplete
                            class="inline-input"
                            v-model="state1"
                            :fetch-suggestions="querySearch"
                            placeholder="请输入内容"
                            @select="handleSelect"
                    ></el-autocomplete>
                </el-col>
                <el-col :span="12">
                    <div class="sub-title">输入后匹配输入建议</div>
                    <el-autocomplete
                            class="inline-input"
                            v-model="state2"
                            :fetch-suggestions="querySearch"
                            placeholder="请输入内容"
                            :trigger-on-focus="false"
                            @select="handleSelect"
                    ></el-autocomplete>
                </el-col>
            </el-row>
            <p>autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。</p>
        </div>

        <div class="vue-transition">
            <p>自定义输入建议</p>
            <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="state4"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect">
                <i
                        class="el-icon-edit el-input__icon"
                        slot="suffix"
                        @click="handleIconClick">
                </i>
                <template slot-scope="{ item }">
                    <div class="name">{{ item.value }}</div>
                    <span class="addr">{{ item.address }}</span>
                </template>
            </el-autocomplete>
        </div>

        <div>
            <p>从服务端搜索数据</p>
            <el-autocomplete
                    v-model="state4"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入内容"
                    @select="handleSelect"
            ></el-autocomplete>
        </div>
    </div>

    <div class="vue-transition">
        <p>Inputnumber计数器</p>
        <div>
            <p>基础用法</p>
            <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="最小1，最大10" size="medium"></el-input-number>
            <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="最小1，最大10，按钮在右侧" size="medium" controls-position="right"></el-input-number>
            <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="禁用" :disabled="true" size="small"></el-input-number>
        </div>

        <div>
            <p>step控制步数</p>
            <el-input-number v-model="num2" :step="2" label="控制步数" size="mini"></el-input-number>
        </div>

        <div>
            <!--precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。-->
            <p>precision设置精度</p>
            <el-input-number v-model="num3" :precision="2" :step="0.1" :max="10"></el-input-number>
        </div>
    </div>

    <div class="vue-transition">
        <p>Select选择器</p>
        <div>
            <p>基础用法/禁用选项</p>
            <el-select v-model="select1" clearable placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                >
                </el-option>
            </el-select>
        </div>

        <div>
            <p>禁用状态</p>
            <el-select v-model="select1" disabled placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                >
                </el-option>
            </el-select>
        </div>

        <div>
            <p>基础多选</p>
            <el-select v-model="select2" multiple placeholder="展开多选">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                >
                </el-option>
            </el-select>

            <el-select v-model="select3" multiple collapse-tags placeholder="折叠多选">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                >
                </el-option>
            </el-select>

            <el-select v-model="select4" collapse-tags placeholder="自定义模板">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                >
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
        </div>

        <div>
            <p>分组</p>
            <el-select v-model="select5" placeholder="请选择">
                <el-option-group
                        v-for="group in options2"
                        :key="group.label"
                        :label="group.label">
                    <el-option
                            v-for="item in group.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-option-group>
            </el-select>
        </div>

        <div>
            <p>filterable可搜索</p>
            <el-select v-model="select6" filterable placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>

        <div>
            <p>远程搜索</p>
            <el-select
                    v-model="select7"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod"
                    :loading="loading">
                <el-option
                        v-for="item in options3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>

        <div>
            <p>创建条目</p>
            <el-select
                    v-model="select8"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择文章标签">
                <el-option
                        v-for="item in options4"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>

    <div class="vue-transition">
        <p>cascader级联选择器</p>
        <div>
            <p>基础用法/选项禁用</p>
            <div class="block">
                <span class="demonstration">默认 click 触发子菜单</span>
                <el-cascader
                        :options="cascaderoptions"
                        v-model="selectedOptions"
                        @change="cascaderhandleChange">
                </el-cascader>
            </div>
            <div class="block">
                <span class="demonstration">hover 触发子菜单</span>
                <el-cascader
                        expand-trigger="hover"
                        :options="cascaderoptions"
                        v-model="selectedOptions2"
                        @change="cascaderhandleChange">
                </el-cascader>
            </div>
        </div>

        <div>
            <p>仅显示最后一级</p>
            <el-cascader
                    :options="cascaderoptions"
                    :show-all-levels="false"
                    @change="cascaderhandleChange"
            >
            </el-cascader>
        </div>

        <div>
            <p>设置默认值</p>
            <el-cascader
                    :options="cascaderoptions"
                    v-model="selectedOptions3"
                    @change="cascaderhandleChange"
            >
            </el-cascader>
        </div>

        <div>
            <p>选择即改变</p>
            <el-cascader
                    :options="cascaderoptions"
                    change-on-select
                    @change="cascaderhandleChange"
            >
            </el-cascader>
        </div>

        <div>
            <p>动态加载次级选项(地址联动)</p>
            <el-cascader
                    :options="cityoptions"
                    @active-item-change="cityhandleItemChange"
                    :props="cityprops"
            >
            </el-cascader>

            <el-cascader
                    :options="cityoptions2"
                    @active-item-change="cityhandleItemChange2"
                    :props="cityprops2"
                    placeholder="地址三级联动"
            >
            </el-cascader>
        </div>

        <div>
            <p>可搜索</p>
            <el-cascader
                    placeholder="只可选择最后一级"
                    :options="cascaderoptions"
                    filterable
            >
            </el-cascader>

            <el-cascader
                    placeholder="可选择任意一级"
                    :options="cascaderoptions"
                    filterable
                    change-on-select
            >
            </el-cascader>
        </div>
    </div>

    <div class="vue-transition">
        <p>Switch</p>
        <div>
            <p>基本用法</p>
            <el-switch
                    v-model="switchvalue"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="按月付费"
                    inactive-text="按年付费"
            >
                <!--active-color:开;inactive-color:关;-->
            </el-switch>
        </div>

        <div>
            <p>禁用</p>
            <el-switch
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    v-model="switchvalue1"
                    disabled
            >
                <!--active-color:开;inactive-color:关;-->
            </el-switch>
        </div>

        <div>
            <p>扩展的 value 类型</p>
            <el-tooltip :content="'Switch value: ' + switchvalue2" placement="top">
                <el-switch
                        v-model="switchvalue2"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="100"
                        inactive-value="0">
                </el-switch>
            </el-tooltip>
        </div>
    </div>

    <div class="vue-transition">
        <p>Slider滑块</p>
        <div>
            <p>基础用法</p>
            <div class="block">
                <span class="demonstration">默认</span>
                <el-slider v-model="slidervalue1"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">自定义初始值</span>
                <el-slider v-model="slidervalue2"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">隐藏 Tooltip</span>
                <el-slider v-model="slidervalue3" :show-tooltip="false"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">格式化 Tooltip</span>
                <el-slider v-model="slidervalue4" :format-tooltip="formatTooltip"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">禁用</span>
                <el-slider v-model="slidervalue5" disabled></el-slider>
            </div>
        </div>

        <div>
            <p>离散值</p>
            <el-slider v-model="slidervalue6" :step="10" :max="50"></el-slider>
            <el-slider v-model="slidervalue7" :step="10" show-stops></el-slider>
        </div>

        <div>
            <p>带有输入框</p>
            <el-slider v-model="slidervalue8" show-input></el-slider>
        </div>

        <div>
            <p>范围选择</p>
            <el-slider v-model="slidervalue9" range :max="10"></el-slider>
        </div>

        <div>
            <p>竖向模式</p>
            <el-slider v-model="slidervalue10" vertical height="200px"></el-slider>
        </div>
    </div>

    <div class="vue-transition">
        <p>TimePicker 时间选择器</p>
        <div>
            <p>固定时间点</p>
            <el-time-select v-model="timevalue1" :picker-options="{start:'8:30',step:'00:15',end:'18:30'}" placeholder="选择固定时间"></el-time-select>
        </div>

        <div>
            <p>任意时间点</p>
            <el-time-picker
                    v-model="timevalue2"
                    :picker-options="{
                      selectableRange: '18:30:00 - 20:30:00'
                    }"
                    placeholder="任意时间点">
            </el-time-picker>
            <el-time-picker
                    arrow-control
                    v-model="timevalue3"
                    :picker-options="{
                      selectableRange: '18:30:00 - 20:30:00'
                    }"
                    placeholder="任意时间点">
            </el-time-picker>
        </div>

        <div>
            <p>固定时间范围</p>
            <el-time-select
                    placeholder="起始时间"
                    v-model="starttimevalue"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }">
            </el-time-select>
            <el-time-select
                    placeholder="结束时间"
                    v-model="endtimevalue"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                      minTime: starttimevalue
                    }">
            </el-time-select>
        </div>

        <div>
            <p>任意时间范围</p>
            <el-time-picker
                    is-range
                    v-model="timevalue4"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
            </el-time-picker>
            <el-time-picker
                    is-range
                    arrow-control
                    v-model="timevalue5"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
            </el-time-picker>
        </div>
    </div>

    <div class="vue-transition">
        <p>DatePicker 日期选择器</p>
        <div>
            <p>选择日</p>
            <div class="block">
                <span class="demonstration">默认</span>
                <el-date-picker
                        v-model="datevalue1"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">带快捷选项</span>
                <el-date-picker
                        v-model="datevalue2"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="datepickerOptions1">
                </el-date-picker>
            </div>
        </div>

        <div>
            <p>其他日期单位</p>
            <div class="block">
                <span class="demonstration">周</span>
                <el-date-picker
                        v-model="datevalue3"
                        type="week"
                        format="yyyy 第 WW 周"
                        placeholder="选择周">
                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">月</span>
                <el-date-picker
                        v-model="datevalue4"
                        type="month"
                        placeholder="选择月">
                </el-date-picker>
            </div>
        </div>
        <div class="container">
            <div class="block">
                <span class="demonstration">年</span>
                <el-date-picker
                        v-model="datevalue5"
                        type="year"
                        placeholder="选择年">
                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">多个日期</span>
                <el-date-picker
                        type="dates"
                        v-model="datevalue6"
                        placeholder="选择一个或多个日期">
                </el-date-picker>
            </div>
        </div>

        <div>
            <p>选择日期范围</p>
            <div class="block">
                <span class="demonstration">默认</span>
                {{datevalue7}}
                <el-date-picker
                        v-model="datevalue7"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">带快捷选项</span>
                <el-date-picker
                        v-model="datevalue8"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="datepickerOptions2">
                </el-date-picker>
            </div>
        </div>

        <div>
            <p>日期格式</p>
            <div class="block">
                <span class="demonstration">默认为 Date 对象</span>
                <div class="demonstration">值：{{ datevalue9 }}</div>
                <el-date-picker
                        v-model="datevalue9"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日">
                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">使用 value-format</span>
                <div class="demonstration">值：{{ datevalue10 }}</div>
                <el-date-picker
                        v-model="datevalue10"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">时间戳</span>
                <div class="demonstration">值：{{ datevalue11 }}</div>
                <el-date-picker
                        v-model="datevalue11"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="timestamp">
                </el-date-picker>
            </div>
        </div>

        <div>
            <p>默认显示日期,指定起始日期和结束日期的默认时刻</p>
            <div class="block">
                <p>组件值：{{ datevalue12 }}</p>
                <el-date-picker
                        v-model="datevalue12"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
            </div>
        </div>
    </div>

    <div class="vue-transition">
        <p>DateTimePicker 日期时间选择器</p>
        <div>
            <p>日期和时间点</p>
            <div class="block">
                <span class="demonstration">默认</span>
                <el-date-picker
                        v-model="datetimevalue1"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">带快捷选项</span>
                <el-date-picker
                        v-model="datetimevalue2"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right"
                        :picker-options="datetimepickerOptions1">
                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">设置默认时间</span>
                <el-date-picker
                        v-model="datetimevalue3"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="12:00:00">
                </el-date-picker>
            </div>
        </div>
    </div>

    <div class="vue-transition">
        <p>upload上传</p>
        <div>
            <p>点击上传</p>
            <div class="block">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
        </div>

        <div>
            <p>用户头像上传</p>
            <div class="block">
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </div>

        <div>
            <p>照片墙</p>
            <div class="block">
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
        </div>

        <div class="vue-transition">
            <p>Rate评分</p>
            <div>
                <p>基础用法</p>
                <div class="block">
                    <span class="demonstration">默认不区分颜色</span>
                    <el-rate v-model="ratevalue1"></el-rate>
                </div>
                <div class="block">
                    <span class="demonstration">区分颜色</span>
                    <el-rate
                            v-model="ratevalue2"
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                    </el-rate>
                </div>
            </div>

            <div>
                <p>辅助文字</p>
                <div class="block">
                    <el-rate
                            v-model="ratevalue3"
                            show-text>
                    </el-rate>
                </div>
            </div>

            <div>
                <p>其他icon</p>
                <div class="block">
                    <!--笑脸-->
                    <!--<el-rate-->
                            <!--v-model="ratevalue4"-->
                            <!--:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"-->
                            <!--void-icon-class="icon-rate-face-off"-->
                            <!--:colors="['#99A9BF', '#F7BA2A', '#FF9900']">-->
                    <!--</el-rate>-->
                    <el-rate
                            v-model="ratevalue4"
                            :icon-classes="['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']"
                            void-icon-class="el-icon-star-off"
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                    </el-rate>
                </div>
            </div>

            <div>
                <p>只读</p>
                <el-rate
                        v-model="ratevalue5"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                </el-rate>
            </div>
        </div>

        <div class="vue-transition">
            <p>ColorPicker 颜色选择器</p>
            <div>
                <p>基础用法</p>
                <div class="block">
                    <span class="demonstration">有默认值</span>
                    <el-color-picker v-model="color1"></el-color-picker>
                </div>
                <div class="block">
                    <span class="demonstration">无默认值</span>
                    <el-color-picker v-model="color2"></el-color-picker>
                </div>
            </div>

            <div>
                <p>选择透明度</p>
                <el-color-picker v-model="color3" show-alpha></el-color-picker>
            </div>

            <div>
                <p>预定义颜色</p>
                <el-color-picker
                        v-model="color5"
                        show-alpha
                        :predefine="predefineColors">
                </el-color-picker>
            </div>

            <div>
                <p>不同尺寸</p>
                <el-color-picker v-model="color4"></el-color-picker>
                <el-color-picker v-model="color4" size="medium"></el-color-picker>
                <el-color-picker v-model="color4" size="small"></el-color-picker>
                <el-color-picker v-model="color4" size="mini"></el-color-picker>
            </div>
        </div>

        <div class="vue-transition">
            <p>Transfer 穿梭框</p>
            <div>
                <p>基础用法</p>
                <el-transfer v-model="transfervalue1" :data="transferdata"></el-transfer>
            </div>

            <div>
                <p>可搜索</p>
                <el-transfer
                        filterable
                        :filter-method="filterMethod"
                        filter-placeholder="请输入城市拼音"
                        v-model="transfervalue2"
                        :data="transferdata2">
                </el-transfer>
            </div>

            <div>
                <p>可自定义</p>
                <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>
                <div style="text-align: center">
                    <el-transfer
                            style="text-align: left; display: inline-block"
                            v-model="transfervalue3"
                            filterable
                            :left-default-checked="[2, 3]"
                            :right-default-checked="[1]"
                            :render-content="renderFunc"
                            :titles="['Source', 'Target']"
                            :button-texts="['到左边', '到右边']"
                            :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
                            @change="transferhandleChange"
                            :data="transferdata">
                        <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
                        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
                    </el-transfer>
                </div>
                <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>
                <div style="text-align: center">
                    <el-transfer
                            style="text-align: left; display: inline-block"
                            v-model="transfervalue4"
                            filterable
                            :left-default-checked="[2, 3]"
                            :right-default-checked="[1]"
                            :titles="['Source', 'Target']"
                            :button-texts="['到左边', '到右边']"
                            :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
                            @change="transferhandleChange"
                            :data="transferdata">
                        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
                        <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
                        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
                    </el-transfer>
                </div>
            </div>

            <div>
                <p>数据项属性别名</p>
                <el-transfer
                    v-model="transfervalue5"
                    :props="{
                      key: 'value',
                      label: 'desc'
                    }"
                    :data="transferdata3">
                </el-transfer>
            </div>
        </div>
    </div>

    <div class="vue-transition">
        <p>Form表单</p>
        <div>
            <p>典型表单</p>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="即时配送">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <p>行内表单</p>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="审批人">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <p>对齐方式</p>
            <el-radio-group v-model="labelPosition" size="small">
                <el-radio-button label="left">左对齐</el-radio-button>
                <el-radio-button label="right">右对齐</el-radio-button>
                <el-radio-button label="top">顶部对齐</el-radio-button>
            </el-radio-group>
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="名称">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-input v-model="formLabelAlign.region"></el-input>
                </el-form-item>
                <el-form-item label="活动形式">
                    <el-input v-model="formLabelAlign.type"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <p>表单验证</p>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="即时配送" prop="delivery">
                    <el-switch v-model="ruleForm.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="活动性质" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <p>自定义校验规则</p>
            <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="ruleForm2.age"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <p>动态增减表单项</p>
            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                <el-form-item
                        prop="email"
                        label="邮箱"
                        :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
                >
                    <el-input v-model="dynamicValidateForm.email"></el-input>
                </el-form-item>
                <el-form-item
                        v-for="(domain, index) in dynamicValidateForm.domains"
                        :label="'域名' + index"
                        :key="domain.key"
                        :prop="'domains.' + index + '.value'"
                        :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
                >
                    <el-input v-model="domain.value" style="width:75%;"></el-input><el-button @click.prevent="removeDomain(domain)" style="width:20%;margin-left:5%;">删除</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                    <el-button @click="addDomain">新增域名</el-button>
                    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <p>数字类型验证</p>
            <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                <el-form-item
                        label="年龄"
                        prop="age"
                        :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
                >
                    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <p>表单内组件尺寸控制</p>
            <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
                <el-form-item label="活动名称">
                    <el-input v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="sizeForm.type">
                        <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
                        <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
                        <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="sizeForm.resource" size="medium">
                        <el-radio border label="线上品牌商赞助"></el-radio>
                        <el-radio border label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item size="large">
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div class="vue-transition">
        <p>Table 表格</p>
        <div>
            <p>基础表格</p>
            <!--stripe:带斑马纹表格-->
            <!--border:带表格-->
            <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
            </el-table>
        </div>

        <div>
            <p>带状态表格</p>
            <!--height:设置高度,固定表头-->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="200"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
            </el-table>
        </div>

        <div>
            <p>固定列</p>
            <!--height:固定表头-->
            <el-table
                    :data="tableData"
                    border
                    height="200"
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="date"
                        label="日期"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="province"
                        label="省份"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="市区"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="zip"
                        label="邮编"
                        width="120">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue_2.5.17.js"></script>
<!-- import JavaScript -->
<script src="js/element_2.4.7.js"></script>
<script>
    new Vue({
        el: '#vue-elememt',
        data: function() {
            var this_ = this;
             function generateData(){
                const data = [];
                for (var i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: `备选项 ${ i }`,
                        disabled: i % 4 === 0
                    });
                }
                return data;
            };
            function generateData2(){
                var data = [];
                var cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
                var pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
                cities.forEach(function(city, index){
                    data.push({
                        label: city,
                        key: index,
                        pinyin: pinyin[index]
                    });
                });
                return data;
            };
            function generateData3(){
                const data = [];
                for (var i = 1; i <= 15; i++) {
                    data.push({
                        value: i,
                        desc: `备选项 ${ i }`,
                        disabled: i % 4 === 0
                    });
                }
                return data;
            };
            var checkAge = function(rule, value, callback){
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }
                setTimeout(function(){
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    }
                    else {
                        if (value < 18) {
                            callback(new Error('必须年满18岁'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            var validatePass = function(rule, value, callback){
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this_.ruleForm2.checkPass !== '') {

                        this_.$refs.ruleForm2.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = function(rule, value, callback){
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this_.ruleForm2.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                visible: false,
                show:false,
                show2:false,
                show3:false,
                rowData: [
                    {
                        parameter: 'gutter',
                        explain: '栅格间隔',
                        type: 'number',
                        option: '—',
                        default: '0'
                    },
                    {
                        parameter: 'type',
                        explain: '布局模式，可选 flex，现代浏览器下有效',
                        type: 'string',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'justify',
                        explain: 'flex 布局下的水平排列方式',
                        type: 'string',
                        option: 'start/end/center/space-around/space-between',
                        default: 'start'
                    },
                    {
                        parameter: 'align',
                        explain: 'flex 布局下的垂直排列方式',
                        type: 'string',
                        option: 'top/middle/bottom',
                        default: 'top'
                    },
                    {
                        parameter: 'tag',
                        explain: '自定义元素标签',
                        type: 'string',
                        option: '*',
                        default: 'div'
                    }
                ],
                colData:[
                    {
                        parameter: 'span',
                        explain: '栅格占据的列数',
                        type: 'number',
                        option: '—',
                        default: '24'
                    },
                    {
                        parameter: 'offset',
                        explain: '栅格左侧的间隔格数',
                        type: 'number',
                        option: '—',
                        default: '0'
                    },
                    {
                        parameter: 'push',
                        explain: '栅格向右移动格数',
                        type: 'number',
                        option: '—',
                        default: '0'
                    },
                    {
                        parameter: 'pull',
                        explain: '栅格向左移动格数',
                        type: 'number',
                        option: '—',
                        default: '0'
                    },
                    {
                        parameter: 'xs',
                        explain: '<768px 响应式栅格数或者栅格属性对象',
                        type: 'number/object (例如： {span: 4, offset: 4})',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'sm',
                        explain: '≥768px 响应式栅格数或者栅格属性对象',
                        type: 'number/object (例如： {span: 4, offset: 4})',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'md',
                        explain: '≥992px 响应式栅格数或者栅格属性对象',
                        type: 'number/object (例如： {span: 4, offset: 4})',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'lg',
                        explain: '≥1200px 响应式栅格数或者栅格属性对象',
                        type: 'number/object (例如： {span: 4, offset: 4})',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'xl',
                        explain: '≥1920px 响应式栅格数或者栅格属性对象',
                        type: 'number/object (例如： {span: 4, offset: 4})',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'tag',
                        explain: '自定义元素标签',
                        type: 'string',
                        option: '*',
                        default: 'div'
                    }
                ],
                ContainerData:[
                    {
                        parameter: 'direction',
                        explain: '子元素的排列方向',
                        type: 'string',
                        option: 'horizontal / vertical',
                        default: '子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal'
                    }
                ],
                HeaderData:[
                    {
                        parameter: 'height',
                        explain: '顶栏高度',
                        type: 'string',
                        option: '—',
                        default: '60px'
                    }
                ],
                AsideData:[
                    {
                        parameter: 'width',
                        explain: '侧边栏宽度',
                        type: 'string',
                        option: '—',
                        default: '300px'
                    }
                ],
                FooterData:[
                    {
                        parameter: 'height',
                        explain: '底栏高度',
                        type: 'string',
                        option: '—',
                        default: '60px'
                    }
                ],
                AttributesData:[
                    {
                        parameter: 'size',
                        explain: '尺寸',
                        type: 'string',
                        option: 'medium / small / mini',
                        default: '—'
                    },
                    {
                        parameter: 'type',
                        explain: '类型',
                        type: 'string',
                        option: 'primary / success / warning / danger / info / text',
                        default: '—'
                    },
                    {
                        parameter: 'plain',
                        explain: '是否朴素按钮',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'round',
                        explain: '是否圆角按钮',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'circle',
                        explain: '是否圆形按钮',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'loading',
                        explain: '是否加载中状态',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'disabled',
                        explain: '是否禁用状态',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'icon',
                        explain: '图标类名',
                        type: 'string',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'autofocus',
                        explain: '是否默认聚焦',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'native-type',
                        explain: '原生 type 属性',
                        type: 'string',
                        option: 'button / submit / reset',
                        default: 'button'
                    }
                ],
                radio:"1",
                radio1:"1",
                radio2:"1",
                RadioData:[
                    {
                        parameter: 'label',
                        explain: 'Radio 的 value',
                        type: 'string / number / boolean',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'disabled',
                        explain: '是否禁用',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'border',
                        explain: '是否显示边框',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'size',
                        explain: 'Radio 的尺寸，仅在 border 为真时有效',
                        type: 'string',
                        option: 'medium / small / mini',
                        default: '—'
                    },
                    {
                        parameter: 'name',
                        explain: '原生 name 属性',
                        type: 'string',
                        option: '—',
                        default: '—'
                    }
                ],
                RadioEvents:[
                    {
                        eventname: 'change',
                        explain: '绑定值变化时触发的事件',
                        callback: '选中的 Radio label 值'
                    }
                ],
                RadiogroupData:[
                    {
                        parameter: 'size',
                        explain: '单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效',
                        type: 'string',
                        option: 'medium / small / mini',
                        default: '—'
                    },
                    {
                        parameter: 'disabled',
                        explain: '是否禁用',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'text-color',
                        explain: '按钮形式的 Radio 激活时的文本颜色',
                        type: 'string',
                        option: '—',
                        default: '#ffffff'
                    },
                    {
                        parameter: 'fill',
                        explain: '按钮形式的 Radio 激活时的填充色和边框色',
                        type: 'string',
                        option: '—',
                        default: '#409EFF'
                    }
                ],
                RadiogroupEvents:[
                    {
                        eventname: 'change',
                        explain: '绑定值变化时触发的事件',
                        callback: '选中的 Radio label 值'
                    }
                ],
                RadiobuttonData:[
                    {
                        parameter: 'label',
                        explain: 'Radio 的 value',
                        type: 'string / number',
                        option: '—',
                        default: '—'
                    },
                    {
                        parameter: 'disabled',
                        explain: '是否禁用',
                        type: 'boolean',
                        option: '—',
                        default: 'false'
                    },
                    {
                        parameter: 'name',
                        explain: '原生 name 属性',
                        type: 'string',
                        option: '—',
                        default: '—'
                    }
                ],
                checked:true,
                checked1:false,
                checked2:false,
                checked3:false,
                checkList: ['选中且禁用','复选框 A'],
                checkbuttonList: ['选中且禁用','复选框 A'],
                isIndeterminate:true,//checkbox的不确定状态
                checkAll:false,
                checkedCities:["上海","广州"],
                cities:["上海","北京","广州","深圳"],
                input:'',
                textarea:'',
                select:'',
                restaurants:[],//input搜索
                state1: '',
                state2: '',
                state3:'',
                state4:'',
                timeout:  null,
                num1:1,
                num2:1,
                num3:1,
                select1:'',
                select2:'',
                select3:'',
                select4:'',
                select5:'',
                select6:'',
                options: [
                    {
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶',
                    disabled: true
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                options2: [
                    {
                    label: '热门城市',
                    options: [{
                        value: 'Shanghai',
                        label: '上海'
                    }, {
                        value: 'Beijing',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options: [{
                        value: 'Chengdu',
                        label: '成都'
                    }, {
                        value: 'Shenzhen',
                        label: '深圳'
                    }, {
                        value: 'Guangzhou',
                        label: '广州'
                    }, {
                        value: 'Dalian',
                        label: '大连'
                    }]
                }],
                options3: [],
                options4: [
                    {
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶',
                        disabled: true
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                select7: [],
                select8: [],
                list: [],
                loading: false,
                states: ["Alabama", "Alaska", "Arizona",
                    "Arkansas", "California", "Colorado",
                    "Connecticut", "Delaware", "Florida",
                    "Georgia", "Hawaii", "Idaho", "Illinois",
                    "Indiana", "Iowa", "Kansas", "Kentucky",
                    "Louisiana", "Maine", "Maryland",
                    "Massachusetts", "Michigan", "Minnesota",
                    "Mississippi", "Missouri", "Montana",
                    "Nebraska", "Nevada", "New Hampshire",
                    "New Jersey", "New Mexico", "New York",
                    "North Carolina", "North Dakota", "Ohio",
                    "Oklahoma", "Oregon", "Pennsylvania",
                    "Rhode Island", "South Carolina",
                    "South Dakota", "Tennessee", "Texas",
                    "Utah", "Vermont", "Virginia",
                    "Washington", "West Virginia", "Wisconsin",
                    "Wyoming"],
                selectedOptions: [],
                selectedOptions2: [],
                selectedOptions3: ['zujian', 'data', 'tag'],
                cascaderoptions: [
                    {
                    value: 'zhinan',
                    label: '指南',
                    disabled: true,
                    children: [{
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [{
                            value: 'yizhi',
                            label: '一致'
                        }, {
                            value: 'fankui',
                            label: '反馈'
                        }, {
                            value: 'xiaolv',
                            label: '效率'
                        }, {
                            value: 'kekong',
                            label: '可控'
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        children: [{
                            value: 'cexiangdaohang',
                            label: '侧向导航'
                        }, {
                            value: 'dingbudaohang',
                            label: '顶部导航'
                        }]
                    }]
                }, {
                    value: 'zujian',
                    label: '组件',
                    children: [{
                        value: 'basic',
                        label: 'Basic',
                        disabled: true,
                        children: [{
                            value: 'layout',
                            label: 'Layout 布局'
                        }, {
                            value: 'color',
                            label: 'Color 色彩'
                        }, {
                            value: 'typography',
                            label: 'Typography 字体'
                        }, {
                            value: 'icon',
                            label: 'Icon 图标'
                        }, {
                            value: 'button',
                            label: 'Button 按钮'
                        }]
                    }, {
                        value: 'form',
                        label: 'Form',
                        children: [{
                            value: 'radio',
                            label: 'Radio 单选框'
                        }, {
                            value: 'checkbox',
                            label: 'Checkbox 多选框'
                        }, {
                            value: 'input',
                            label: 'Input 输入框'
                        }, {
                            value: 'input-number',
                            label: 'InputNumber 计数器'
                        }, {
                            value: 'select',
                            label: 'Select 选择器'
                        }, {
                            value: 'cascader',
                            label: 'Cascader 级联选择器'
                        }, {
                            value: 'switch',
                            label: 'Switch 开关'
                        }, {
                            value: 'slider',
                            label: 'Slider 滑块'
                        }, {
                            value: 'time-picker',
                            label: 'TimePicker 时间选择器'
                        }, {
                            value: 'date-picker',
                            label: 'DatePicker 日期选择器'
                        }, {
                            value: 'datetime-picker',
                            label: 'DateTimePicker 日期时间选择器'
                        }, {
                            value: 'upload',
                            label: 'Upload 上传'
                        }, {
                            value: 'rate',
                            label: 'Rate 评分'
                        }, {
                            value: 'form',
                            label: 'Form 表单'
                        }]
                    }, {
                        value: 'data',
                        label: 'Data',
                        children: [{
                            value: 'table',
                            label: 'Table 表格'
                        }, {
                            value: 'tag',
                            label: 'Tag 标签'
                        }, {
                            value: 'progress',
                            label: 'Progress 进度条'
                        }, {
                            value: 'tree',
                            label: 'Tree 树形控件'
                        }, {
                            value: 'pagination',
                            label: 'Pagination 分页'
                        }, {
                            value: 'badge',
                            label: 'Badge 标记'
                        }]
                    }, {
                        value: 'notice',
                        label: 'Notice',
                        children: [{
                            value: 'alert',
                            label: 'Alert 警告'
                        }, {
                            value: 'loading',
                            label: 'Loading 加载'
                        }, {
                            value: 'message',
                            label: 'Message 消息提示'
                        }, {
                            value: 'message-box',
                            label: 'MessageBox 弹框'
                        }, {
                            value: 'notification',
                            label: 'Notification 通知'
                        }]
                    }, {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [{
                            value: 'menu',
                            label: 'NavMenu 导航菜单'
                        }, {
                            value: 'tabs',
                            label: 'Tabs 标签页'
                        }, {
                            value: 'breadcrumb',
                            label: 'Breadcrumb 面包屑'
                        }, {
                            value: 'dropdown',
                            label: 'Dropdown 下拉菜单'
                        }, {
                            value: 'steps',
                            label: 'Steps 步骤条'
                        }]
                    }, {
                        value: 'others',
                        label: 'Others',
                        children: [{
                            value: 'dialog',
                            label: 'Dialog 对话框'
                        }, {
                            value: 'tooltip',
                            label: 'Tooltip 文字提示'
                        }, {
                            value: 'popover',
                            label: 'Popover 弹出框'
                        }, {
                            value: 'card',
                            label: 'Card 卡片'
                        }, {
                            value: 'carousel',
                            label: 'Carousel 走马灯'
                        }, {
                            value: 'collapse',
                            label: 'Collapse 折叠面板'
                        }]
                    }]
                }, {
                    value: 'ziyuan',
                    label: '资源',
                    children: [{
                        value: 'axure',
                        label: 'Axure Components'
                    }, {
                        value: 'sketch',
                        label: 'Sketch Templates'
                    }, {
                        value: 'jiaohu',
                        label: '组件交互文档'
                    }]
                }],
                cityoptions: [
                    {
                    label: '江苏',
                    cities: []
                }, {
                    label: '浙江',
                    cities: []
                }],
                cityprops: {
                    value: 'label',
                    children: 'cities'
                },
                cityoptions2: [
                    {
                    label: '安徽',
                    value:'340000',
                    cities: []
                }, {
                    label: '福建',
                    value:'350000',
                    cities: []
                },{
                    label: '澳门',
                    value:'360000',
                    cities: []
                }],
                cityprops2: {
                    label:'label',
                    value: 'value',
                    children: 'cities'
                },
                switchvalue:true,
                switchvalue1:true,
                switchvalue2:'100',
                slidervalue1:0,
                slidervalue2:50,
                slidervalue3:36,
                slidervalue4:48,
                slidervalue5:46,
                slidervalue6:20,
                slidervalue7:10,
                slidervalue8:15,
                slidervalue9:[4,6],
                slidervalue10:10,
                timevalue1:'',
                timevalue2:new Date(2018,9,30,19,15),
                timevalue3:new Date(2018,9,30,20,10),
                // timevalue4:'',
                // timevalue5:'',
                timevalue4:[new Date(2018,9,30,19,15),new Date(2018,9,30,20,10)],
                timevalue5:[new Date(2018,9,30,19,15),new Date(2018,9,30,20,10)],
                starttimevalue:'',
                endtimevalue:'',
                datepickerOptions1:{
                    disabledDate:function(time){
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick:function(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick:function(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick:function(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                datevalue1: '',
                datevalue2: '',
                datevalue3: '',
                datevalue4: '',
                datevalue5: '',
                datevalue6: '',
                datepickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick:function(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick:function(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick:function(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                datevalue7: '',
                datevalue8: '',
                datevalue9: '',
                datevalue10: '',
                datevalue11: '',
                datevalue12: '',
                datetimepickerOptions1: {
                    shortcuts: [{
                        text: '今天',
                        onClick:function(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick:function(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick:function(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                datetimevalue1: '',
                datetimevalue2: '',
                datetimevalue3: '',

                fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],

                imageUrl: '',
                dialogImageUrl: '',
                dialogVisible: false,

                ratevalue1: null,
                ratevalue2: null,
                ratevalue3: null,
                ratevalue4: 1,
                ratevalue5:3.7,
                color1: '#409EFF',
                color2: null,
                color3: 'rgba(19, 206, 102, 0.8)',
                color4: '#409EFF',
                color5: 'rgba(255, 69, 0, 0.68)',
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ],
                transferdata: generateData(),
                transfervalue1: [1, 4],
                transferdata2: generateData2(),
                transfervalue2: [],
                filterMethod:function(query, item) {
                    return item.pinyin.indexOf(query) > -1;
                },
                transfervalue3: [1],
                transfervalue4: [1],
                // renderFunc(h, option) {
                //     return <span>{ option.key } - { option.label }</span>;
                // }
                renderFunc:function(h, option) {
                    // 无法渲染出页面,貌似需要自己配置jsx文件
                    // return <span>{ option.key } - { option.label }</span>;
                },
                transferdata3: generateData3(),
                transfervalue5: [],

                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formInline: {
                    user: '',
                    region: ''
                },
                labelPosition: 'right',
                formLabelAlign: {
                    name: '',
                    region: '',
                    type: ''
                },
                ruleForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    name: [
                        { required: false, message: '请输入活动名称', trigger: 'blur' },//required表示必填标志
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: false, message: '请选择活动区域', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                },
                ruleForm2: {
                    pass: '',
                    checkPass: '',
                    age: ''
                },
                rules2: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    age: [
                        { validator: checkAge, trigger: 'blur' }
                    ]
                },
                dynamicValidateForm: {
                    domains: [{
                        value: ''
                    }],
                    email: ''
                },
                numberValidateForm: {
                    age: ''
                },
                sizeForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }]
            };
        },
        methods:{
            radio2_change:function(val){//多选框改变时
                alert(val)
            },
            clear:function(){
                alert("清空输入框")
            },

            handleCheckAllChange:function(val){//全选非全选
                this.checkedCities = val ? this.cities :[]
                this.isIndeterminate = false;
                // 如果val为true就等于this.cities,否则就为[]
            },
            handleCheckedCitiesChange:function(value){
                var checkedCount = value.length;
                this.checkAll = checkedCount===this.cities.length;// this.checkAll是否为真
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                //判断isIndeterminate是否为真
            },

            select_change:function(val){//select时间改变时
                alert(val)
            },

            querySearch:function(queryString, cb) {//输入建议
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter:function(queryString) {
                return function(restaurant){
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            querySearchAsync:function(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(function(){
                    cb(results);
            }, 3000 * Math.random());
            },
            createStateFilter:function(queryString) {
                return function(state) {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll:function() {
                return [
                    { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                    { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                    { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                    { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                    { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                    { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                    { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
                    { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                    { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
                    { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
                    { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
                    { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
                    { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
                    { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
                    { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
                    { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
                    { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
                    { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
                    { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
                    { "value": "枪会山", "address": "上海市普陀区棕榈路" },
                    { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
                    { "value": "钱记", "address": "上海市长宁区天山西路" },
                    { "value": "壹杯加", "address": "上海市长宁区通协路" },
                    { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
                    { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
                    { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
                    { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
                    { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
                    { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
                    { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
                    { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
                    { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
                    { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
                    { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
                    { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
                    { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
                    { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
                    { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
                    { "value": "浏阳蒸菜", "address": "天山西路430号" },
                    { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
                    { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
                    { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
                    { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
                    { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
                    { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
                    { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
                    { "value": "阳阳麻辣烫", "address": "天山西路389号" },
                    { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
                ];
            },
            handleSelect:function(item) {
                console.log(item);
            },
            handleIconClick:function(ev) {
                console.log(ev);
            },

            handleChange:function(value) {
                console.log(value);
            },

            cascaderhandleChange:function(value) {
                console.log(value);
            },

            remoteMethod:function(query) {
                var this_ = this;
                if (query !== '') {
                    this.loading = true;
                    setTimeout(function(){
                        this_.loading = false;
                        this_.options3 = this_.list.filter(function(item){
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this_.options3 = [];
                }
            },

            cityhandleItemChange:function(val) {
                var this_ = this;
                console.log('active item:', val);
                setTimeout(function(){
                    if (val.indexOf('江苏') > -1 && !this_.cityoptions[0].cities.length) {
                        this_.cityoptions[0].cities = [{
                            label: '南京'
                        }];
                    } else if (val.indexOf('浙江') > -1 && !this_.cityoptions[1].cities.length) {
                        this_.cityoptions[1].cities = [{
                            label: '杭州'
                        }];
                    }
                }, 300);
            },

            cityhandleItemChange2:function(val) {
                var this_ = this;
                console.log('active item:', val);
                setTimeout(function(){
                    if (val.indexOf('340000') > -1 && !this_.cityoptions2[0].cities.length) {//安徽
                        this_.cityoptions2[0].cities = [{
                            label: '芜湖',
                            value:'340100',
                            cities:[]
                        },{
                            label: '合肥',
                            value:'340200',
                            cities:[]
                        },{
                            label: '马鞍山',
                            value:'340300',
                            cities:[]
                        }];
                    } else if (val.indexOf('350000') > -1 && !this_.cityoptions2[1].cities.length) {//福建
                        this_.cityoptions2[1].cities = [{
                            label: '南平',
                            value:'350100',
                            cities:[]
                        },{
                            label: '福州',
                            value:'350200',
                            cities:[]
                        },{
                            label: '厦门',
                            value:'350300',
                            cities:[]
                        }];
                    } else if (val.indexOf('360000') > -1 && !this_.cityoptions2[2].cities.length) {//澳门
                        this_.cityoptions2[2].cities = [{
                            label: '澳门',
                            value:'360100'
                        }];
                    }

                    if (val.indexOf('340100') > -1 && !this_.cityoptions2[0].cities[0].cities.length) {//芜湖
                        this_.cityoptions2[0].cities[0].cities = [{
                            label: '鸠江区',
                            value:'340101'
                        },{
                            label: '九华北路',
                            value:'340102'
                        }];
                    } else if (val.indexOf('340200') > -1 && !this_.cityoptions2[0].cities[1].cities.length){//合肥
                        this_.cityoptions2[0].cities[1].cities = [{
                            label: '肥东',
                            value:'340201'
                        },{
                            label: '肥西',
                            value:'340202'
                        },{
                            label: '巢湖',
                            value:'340203'
                        }];
                    } else if (val.indexOf('340300') > -1 && !this_.cityoptions2[0].cities[2].cities.length){//马鞍山
                        this_.cityoptions2[0].cities[2].cities = [{
                            label: '花山',
                            value:'340301'
                        },{
                            label: '雨山',
                            value:'340302'
                        },{
                            label: '当涂',
                            value:'340303'
                        }];
                    }

                    if (val.indexOf('350100') > -1 && !this_.cityoptions2[1].cities[0].cities.length) {//南平
                        this_.cityoptions2[1].cities[0].cities = [{
                            label: '武夷山',
                            value:'350101'
                        },{
                            label: '建瓯',
                            value:'350102'
                        },{
                            label: '邵武',
                            value:'350103'
                        }];
                    } else if (val.indexOf('350200') > -1 && !this_.cityoptions2[1].cities[1].cities.length) {//福州
                        this_.cityoptions2[1].cities[1].cities = [{
                            label: '闽侯',
                            value:'350201'
                        },{
                            label: '台江',
                            value:'350202'
                        },{
                            label: '平潭',
                            value:'350203'
                        }];
                    } else if (val.indexOf('350300') > -1 && !this_.cityoptions2[1].cities[2].cities.length) {//厦门
                        this_.cityoptions2[1].cities[2].cities = [{
                            label: '集美',
                            value:'350301'
                        },{
                            label: '湖里',
                            value:'350302'
                        },{
                            label: '同安',
                            value:'350303'
                        }];
                    }

                    if (val.indexOf('360100') > -1 && !this_.cityoptions2[2].cities[0].cities.length) {//澳门
                        this_.cityoptions2[2].cities[0].cities = [{
                            label: '澳门',
                            value:'360101'
                        }];
                    }
                }, 300);
            },

            formatTooltip:function(val) {
                return val / 100;
            },

            handleRemove:function(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview:function(file) {
                console.log(file);
            },
            handleExceed:function(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove:function(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },

            handleAvatarSuccess:function(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload:function(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            handlePictureCardPreview:function(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            transferhandleChange:function(value, direction, movedKeys) {
                console.log(value, direction, movedKeys);
            },
            onSubmit:function() {
                console.log('submit!');
            },
            submitForm:function(formName) {
                this.$refs[formName].validate(function(valid){
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            resetForm:function(formName) {
                this.$refs[formName].resetFields();
            },
            removeDomain:function(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
            addDomain:function() {
                this.dynamicValidateForm.domains.push({
                    value: '',
                    key: Date.now()
                });
            },
            tableRowClassName:function({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleClick:function(row) {
                console.log(row);
            }
        },
        mounted:function() {
            this.restaurants = this.loadAll();
            this.list = this.states.map(function(item){
                return { value: item, label: item };
            });
        }
    })
</script>
</html>